import React, {Component} from 'react'
import {
  View,
  Text,
  TouchableOpacity,
  Platform,
  StyleSheet,
  ActivityIndicator,
  Image,
  TextInput,
} from 'react-native'
import Toast, {
  DURATION
} from 'react-native-easy-toast'
import {Actions} from "react-native-router-flux";
import font from './../../styles/font'
import {ListRow} from 'teaset'
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'
import { SafeAreaView } from 'react-navigation';

class UserDateScene extends Component{
  constructor(props){
    super(props)
    this.state={
      rname: this.props.rname,
      mobile: this.props.mobile,
      pays: this.props.pays,
      address: this.props.address
    }
  }


  componentWillReceiveProps(nextProps) {
    const { updateUser } = nextProps
    if(this.props.updateUser !== updateUser){
      if (updateUser.error !== false) {
        if(updateUser.error.status === 401){
          Actions.login()
        }
        this.toast.show(updateUser.error.message)
      }else{
        if (updateUser.data && !updateUser.isLoading) {
          // Toast.message('正在加载', null, 'center')
          setTimeout(()=> {
            Actions.refresh({
              refresh: true,
              // resultMessage: "正在刷新"
            })
          }, 100);
          Actions.pop()
        }
      }
    }

  }




  _submit(){
    if(!this.state.rname){
      this.toast.show('姓名不能为空')
    }else if(!this.state.pays){
      this.toast.show('提现支付宝不能为空')
    }else if(!this.state.address){
      this.toast.show('详细地址不能为空')
    }else{
      this.props.actions.updateUser(this.state)
    }
  }

  render(){
    return(
      <KeyboardAwareScrollView style={styles.container}>
       <View style={styles.formContainer}>
         <View style={styles.formItem}>
           <Text style={[font.black14, styles.fontMargin]}>昵称</Text>
           <Text>{this.props.username}</Text>
         </View>
         <View style={styles.formItem}>
           <Text style={[font.black14, styles.fontMargin]}>头像</Text>
           <Image source={{uri:this.props.avatar}} style={[styles.headIcon]}/>
         </View>
       </View>
        <Text style={{marginLeft:5}}>认证资料</Text>
        <View style={styles.formContainer}>
          <View style={styles.formItem}>
            <Text style={[font.black14, styles.fontMargin]}>姓名</Text>
            <TextInput
              value ={this.state.rname}
              style={styles.input}
              underlineColorAndroid='transparent'
              onChangeText={(text)=>{this.setState({rname: text})}}
            />
          </View>
          <View style={styles.formItem}>
            <Text style={[font.black14, styles.fontMargin]}>手机号码</Text>
            <Text>{this.props.mobile}</Text>
          </View>
          <View style={styles.formItem}>
            <Text style={[font.black14, styles.fontMargin, {color:'#f00'}]}>提现支付宝</Text>
            <TextInput
              value ={this.state.pays}
              style={styles.input}
              underlineColorAndroid='transparent'
              onChangeText={(text)=>{this.setState({pays: text})}}
            />
          </View>
        </View>
        <Text style={{marginLeft:5}}>详细地址</Text>
        <View style={styles.formContainer}>
          <View style={styles.formItem}>
            <Text style={[font.black14, styles.fontMargin]}>地区信息</Text>
            <Text style={font.black14}>{this.props.province} {this.props.city}</Text>
          </View>
          <View style={styles.formItem}>
            <Text style={[font.black14, styles.fontMargin]}>详细地址</Text>
            <TextInput
              value ={this.state.address}
              style={styles.input}
              underlineColorAndroid='transparent'
              onChangeText={(text)=>{this.setState({address: text})}}
            />
          </View>
        </View>
        <TouchableOpacity style={styles.submitButton} onPress={()=>{this._submit()}}>
          <Text style={font.white14}>保存</Text>
        </TouchableOpacity>

        <Toast
          ref={view => this.toast = view}
          style={{backgroundColor:'red'}}
          opacity={0.6}
          position='top'/>
      </KeyboardAwareScrollView>
    )
  }
}

const styles = StyleSheet.create({
  container:{
    flex:1,
  },
  formContainer:{
    backgroundColor:'#fff',
    borderTopColor:'#e5e5e5',
    borderTopWidth:1,
    borderBottomColor:'#e5e5e5',
    borderBottomWidth:1,
    paddingLeft:15,
    marginBottom:15,
    marginTop:5
  },
  formItem:{
    justifyContent:'space-between',
    alignItems:'center',
    borderBottomColor:'#e5e5e5',
    borderBottomWidth:1,
    flexDirection:'row',
    paddingRight:15
  },
  fontMargin:{
    marginVertical:10,
  },
  headIcon:{
    width:50,
    height:50,
    borderRadius:25,
    marginVertical:5
  },
  input:{
    width:150,
    textAlign: 'right',
    color:'#000',
    height:40
  },
  submitButton:{
    backgroundColor:'#ff9518',
    height:40,
    marginTop:15,
    borderRadius:5,
    justifyContent:'center',
    alignItems:'center',
    marginHorizontal:20
  }
})

export const LayoutComponent = UserDateScene

export function mapStateToProps(state, props) {
  return {
    routes: state.routes,
    updateUser: state.updateUserReducer,
  }
}